<!-- 分享面板 -->
<template>
	<view class="ku-share-content">
		<view class="ku-share-head">
			立即分享给好友
		</view>
		<view class="ku-share-body">
			<u-row justify="space-between" gutter="10">
				<u-col span="3">
					<view class="ku-flex-direction">
						<u-icon name="weixin-circle-fill" color="#0bc15f" size="56"></u-icon>
						<view>微信</view>

					</view>

				</u-col>
				<u-col span="3">
					<view class="ku-flex-direction">
						<u-icon name="moments-circel-fill" color="#7bc845" size="56"></u-icon>
						<view>朋友圈</view>
					</view>
				</u-col>
				<u-col span="3">

				</u-col>
				<u-col span="3">

				</u-col>
			</u-row>
		</view>
		<view class="ku-divider-20">

		</view>
		<view class="ku-share-footer">
			<u-button type="default" text="取消" @click="closeShare"></u-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSharePopup: false, // 弹出框显示隐藏--分享
			}
		},
		methods: {
			// 关闭分享
			closeShare() {
				this.$emit('closeSharePopup');
			}
		}
	}
</script>


<style scoped lang="scss">
	.ku-share-content {
		.ku-divider-20 {
			padding: 10rpx;
			background-color: #f7f8fa;
		}

		.ku-share-head {
			text-align: center;
			color: #000;
			font-size: 28rpx;
			padding: 30rpx;
		}

		.ku-share-body {
			padding: 0 30rpx 30rpx 30rpx;

			.ku-flex-direction {
				text-align: center;
				color: #646566;
				font-size: 24rpx;

				.u-icon {
					flex-direction: column;
				}
			}
		}

		.ku-share-footer {}
	}
</style>